<!DOCTYPE html>
<!--
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
-->
<html>
<head>
    <meta charset="utf-8">
    <title>Mentions &mdash; CKEditor Sample</title>
    <script src="../../../ckeditor.js"></script>
    <link rel="stylesheet" href="../../../samples/css/samples.css">
</head>
<body>

<style>
    .adjoined-bottom:before {
        height: 270px;
    }
</style>

<nav class="navigation-a">
    <div class="grid-container">
        <ul class="navigation-a-left grid-width-70">
            <li><a href="https://ckeditor.com">Project Homepage</a></li>
            <li><a href="https://github.com/ckeditor/ckeditor-dev/issues">I found a bug</a></li>
            <li><a href="https://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork
                CKEditor on GitHub</a></li>
        </ul>
        <ul class="navigation-a-right grid-width-30">
            <li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
        </ul>
    </div>
</nav>

<header class="header-a">
    <div class="grid-container">
        <h1 class="header-a-logo grid-width-30">
            <img src="../../../samples/img/logo.svg"
                 onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample">
        </h1>
    </div>
</header>

<main>
    <div class="adjoined-top">
        <div class="grid-container">
            <div class="content grid-width-100">
                <h1>Mentions Demo</h1>
                <p>This sample shows Mentions feature in action. Type &#8220; @ &#8221; to open simple autocompletion
                    with array feed, &#8220; $ &#8221; (min 1 character) to open asynchronous autocompletion with URL
                    string feed or &#8220; # &#8221; (min 2 characters) to open asynchronous autocompletion with custom
                    source of data.</p>
            </div>
        </div>
    </div>
    <div class="adjoined-bottom">
        <div class="grid-container">
            <div class="grid-width-100">
                <div id="editor">
                    <h1>Mentions plugin</h1>
                    <p>Feel free to mention @anna, @cris, @thomas or anyone else.</p>
                </div>
            </div>
        </div>
    </div>
</main>

<footer class="footer-a grid-container">
    <div class="grid-container">
        <p class="grid-width-100">
            CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
        </p>
        <p class="grid-width-100" id="copy">
            Copyright &copy; 2003-2019, <a class="samples" href="https://cksource.com/">CKSource</a> &ndash; Frederico
            Knabben. All rights reserved.
        </p>
    </div>
</footer>

<script>
    'use strict';

    (function () {

        var data = [
            {id: 1, name: 'john', fullName: 'John Doe'},
            {id: 2, name: 'thomas', fullName: 'Thomas Doe'},
            {id: 3, name: 'anna', fullName: 'Anna Doe'},
            {id: 4, name: 'annabelle', fullName: 'Annabelle Doe'},
            {id: 5, name: 'cris', fullName: 'Cris Doe'},
            {id: 6, name: 'julia', fullName: 'Julia Doe'}
        ];

        CKEDITOR.replace('editor', {
            height: 240,
            extraPlugins: 'mentions,easyimage,sourcearea,toolbar,undo,wysiwygarea,basicstyles',
            extraAllowedContent: 'h1',
            toolbar: [
                {name: 'document', items: ['Source', 'Undo', 'Redo']},
                {name: 'basicstyles', items: ['Bold', 'Italic', 'Strike']},
            ],
            mentions: [

                {
                    feed: CKEDITOR.tools.array.map(data, function (item) {
                        return item.name;
                    }),
                    minChars: 0
                },
                {
                    feed: '{encodedQuery}',
                    marker: '$',
                    minChars: 1,
                    template: '<li data-id="{id}">{fullName}</li>'
                },
                {
                    feed: dataCallback,
                    marker: '#',
                    template: '<li data-id="{id}">{name} ({fullName})</li>'
                }
            ],
            on: {
                instanceReady: function () {
                    // We have to stub ajax.load function.
                    CKEDITOR.ajax.load = function (query, callback) {
                        var results = data.filter(function (item) {
                            return item.name.indexOf(query) === 0;
                        });

                        setTimeout(function () {
                            callback(JSON.stringify(results));
                        }, Math.random() * 500);
                    }
                }
            }
        });

        function dataCallback(opts, callback) {
            setTimeout(function () {
                callback(
                    data.filter(function (item) {
                        return item.name.indexOf(opts.query) === 0;
                    })
                );
            }, Math.random() * 500);
        }

    })();
</script>

</body>
</html>
